<template>
    <section class="page-content">
        <div class="toolbar">
            <!-- <el-button type="primary" icon="yuethink-add" size="small" @click="create">新增</el-button> -->
            <el-button type="success" icon="yuethink-edit" size="small" @click="edit">编辑</el-button>
            <!-- <el-button type="danger" icon="yuethink-delete" size="small" @click="destory">删除</el-button> -->
        </div>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick"  v-loading="treeLoading">
            <el-tab-pane label="题目分类" name="post">
                <el-tree
                        ref="tree"
                        :data="treeData"
                        :props="props"
                        :indent="26"
                        @node-click="nodeClick"
                        default-expand-all
                        node-key="id"
                        :highlight-current="true"
                >
                </el-tree>
            </el-tab-pane>
        </el-tabs>
        <!-- dialig -->
        <el-dialog title="分类" :visible.sync="visible">
            <el-form :model="formData" ref="formData" :rules="formRules"  label-width="120px">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="formData.name" placeholder="分类名称"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="formData.price" placeholder="价格"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="introduce">
                    <el-input type="textarea" v-model="formData.introduce" placeholder="描述"></el-input>
                </el-form-item>
                <el-input v-model="formData.belongs_to" type="hidden"></el-input>
                <el-input v-model="formData.id" type="hidden"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false" :disabled="editLoading">取 消</el-button>
                <el-button type="primary" :loading="editLoading" @click="handleCreateOrEdit('formData')">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
export default {
  data () {
    return {
      // tree
      activeName: 'post',
      checkedNode: null,
      treeData: [],
      props: {
        children: 'children',
        label: 'name'
      },
      treeLoading: false,
      // dialog
      editLoading: false,
      visible: false,
      tempData: {
        id: null,
        name: '',
        parent_id: null,
        belongs_to: 'goods',
        keywords: '',
        description: ''
      },
      formData: {},
      formRules: {
        name: [
           { required: true, message: '请输入分类名称', trigger: 'blur' },
           { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        parent_id: [
          { type: 'number', required: true, message: '请选择父级分类', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    nodeClick (data, node) {
      // this.checkedNode = data
      this.checkedNode = Object.assign({}, data)
    },
    create () {
      this._restFormData()
      this.visible = true
    },

    edit () {
      if (!this.checkedNode) {
        this.$message.warning('请点击选中要编辑的类别')
        return false
      }
      this.formData = this.checkedNode
      this.visible = true
    },

    handleCreateOrEdit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http({
            method: this.formData.id === null ? 'post' : 'put',
            url: this.formData.id === null ? '/subjectSort' : '/subjectSort/' + this.formData.id,
            data: this.formData
          }).then((response) => {
            this.$message.success(response.data.message)
            this.editLoading = false
            this.visible = false
            this._getTreeData()
          }).catch((error) => {
            this.editLoading = false
            console.log(error)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    destory () {
      if (!this.checkedNode) {
        this.$message.warning('请点击选中要删除的类别')
        return false
      }
      if (this.checkedNode && this.checkedNode.children && this.checkedNode.children.length > 0) {
        this.$message.warning('【' + this.checkedNode.name + '】分类下存在子分类，不能删除')
        return false
      }

      this.$confirm('确定要删除【' + this.checkedNode.name + '】分类?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('/subjectSort/' + this.checkedNode.id).then((response) => {
          this.$message.success('删除成功')
          this.checkedNode = null
          this._getTreeData()
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {
      })
    },

    _getTreeData () {
      this.treeLoading = true
      let treeUrl = '/subjectSort?belongs_to=' + this.tempData.belongs_to
      this.$http.get(treeUrl).then((response) => {
        this.treeData = response.data
        this.treeLoading = false
      }).catch((error) => {
        console.log(error)
      })
    },
    _restFormData () {
      this.formData = Object.assign({}, this.tempData)
    }
  },
  mounted () {
    this._restFormData()
    this._getTreeData()
  }
}
</script>
<style lang="scss" scoped>
    .el-select, .el-input, .el-textarea {
        width: 80%;
    }
</style>